<!--
* description: 公司客户详情
* author:chenjingwen
* createdDate:2020-12-19
-->
<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible.sync="popupsVisible"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">联系信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList2" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">客户标签</div>
      <div class="filter-container filter-params">
        <el-form label-position="right">
          <el-row>
            <el-col>
              <el-form-item label="客户标签">
                <div style="text-align: left">
                  <el-tag
                    v-for="item in dynamicTags"
                    :key="item"
                    type="success"
                    :disable-transitions="false"
                  >{{ item.label }}
                  </el-tag>
                  <!-- <el-button
                    type="primary"
                    @click="showInput"
                  >添加标签</el-button> -->
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <customer
      :key="editPopupsKey"
      :edit-popups-visible.sync="editPopupsVisible"
      :user-select-tag-array.sync="dynamicTags"
      :data-for-form="editRowData"
      :popups-state="editPopupsState"
      :title-name="titleName"
      @close="closeCust"
    />
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/subsidyManage";
import customer from "./customer.vue";
import { custApi } from "@/api/se/customerManagement.js";
export default {
  components: {
    OneTableTemplate,
    customer,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    popupsVisible: { type: Boolean, default: false }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'

    return {
      editRowData: {},
      editPopupsState: '',
      editPopupsVisible: false,
      dynamicTags: [
        {
          name: 'scienceMessage',
          type: 'info',
          label: '游戏',
          start: true,
          id: '1'
        }
      ],
      inputValue: '',
      inputVisible: false,
      titleName: '公司详情',
      inEditPopupsState: '',
      inEditRowData: {},
      inEditPopupsVisible: false,
      apiConfig: api.queryLog,

      // 动态组件-查询条件
      tableComponents: [],
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '用户编号：',
              codeField: 'dlrCustNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '公司简称：',
              codeField: 'custName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '公司全称：',
              codeField: 'custFullName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '机构代码：',
              codeField: 'credNo',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '法人名称：',
              codeField: 'legalPerson',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '公司性质：',
              codeField: 'comNature',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,

              isMust: true
            },
            {
              compKey: 'compKey7',
              labelName: '省份：',
              codeField: 'addrProvince',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey8',
              labelName: '城市：',
              codeField: 'addrCity',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey9',
              labelName: '区县：',
              codeField: 'addrCounty',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey10',
              labelName: '详细地址：',
              codeField: 'addrStreet',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 16,
              isMust: true
            },
            {
              compKey: 'compKey11',
              labelName: '邮编：',
              codeField: 'addrZip',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey12',
              labelName: '公司规模：',
              codeField: 'comSize',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey13',
              labelName: '建档日期：',
              codeField: 'createdDate',
              component: () => import('@/components/org/commonInput'),
              type: 'dropdownList',
              span: 8,
              isMust: true
            }
          ],

      // 动态组件-查询条件
      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
              {
                compKey: "compKey14",
                labelName: "联系人：",
                codeField: "conectPerson",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey15",
                labelName: "联系电话：",
                codeField: "conectTel",
                component: () => import("@/components/org/commonInput"),
                type: "datePicker",
                isMust: true,
              },
              {
                compKey: "compKey16",
                labelName: "公司电话：",
                codeField: "custLxPhone",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey17",
                labelName: " EMALL：",
                codeField: "emailCom",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey18",
                labelName: "传真：",
                codeField: "faxCom",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
              {
                compKey: "compKey19",
                labelName: "公司网址：",
                codeField: "website",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
            ],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          addrCity: '',
          addrProvince: '',
          addrStreet: '',
          convTimeCode: '',
          createdDate: '',
          credNo: '',
          credTypeName: '',
          custName: '',
          education: '',
          emailContact: '',
          genderCode: '',
          homeTel: '',
          income: '',
          isMarry: '',
          nationCode: '',
          officeTel: '',
          personId: '',
          phone: '',
          post: '',
          qqContact: '',
          webchatContact: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  // 监听标签值
  watch: {
    dynamicTags(value) {
      const val = value.join(',')
      var parent = this.$utils.getHasFormFieldParentComponent(this)
      parent.formField[this.codeField] = val
      this.$emit('changeCode', value)
      console.log(this.dataForForm)
    },
    getVal(xzz) {
      this.dynamicTags = xzz.split(",");
    },
    curPopupsVisible: {
      handler: function(val) {
        if (val) {
          const queryObj = {
            // 保存mutation
            type: 'mutation',
            // api配置
            apiConfig: custApi.queryCompanyCustomerDetails,
            // 条件/实体参数（变量），根据typeParam中的定义配置
            variables: { dlrCustNo: this.dynamicEditRowData.dlrCustNo }
          }
          // 转换了中台请求格式数据
          var paramDs = this.$getParams(queryObj)
          // 调用中台API方法（可复用）
          this.$requestAPI(paramDs).then((response) => {
            if (response.result === "1") {
              this.formField = response.rows[0];
            }
          })
        }
      }
    }
  },
  methods: {
    // 关闭
    closeEdit() {
      this.$emit('update:popupsVisible', false)
      this.oneTableKey = this.$utils.generateId()
    },
    closeCust() {},
    showInput() {
      // debugger
      this.editPopupsVisible = true
      // this.$nextTick(_ => {
      //   this.$refs.saveTagInput.$refs.input.focus();
      // });
    },
    // 点击选择标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.prompt {
  color: #e70020;
  font-size: 13px;
  height: 15px;
  line-height: 15px;
}
/deep/.el-dialog__body {
  height: 500px;
}
/deep/.filter-params .el-col {
  margin-bottom: 15px;
}
.button-new-tag {
  width: 68px;
  height: 30px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 30px;
  margin: 5px 0 10px 0;
}
.el-tag--small {
  margin: 0 10px 5px 10px;
}
</style>
